<script setup lang="ts">
  import { ref } from 'vue'
  import GameBtn from '@/wxcomponents/game-btn'
  import boxBadge from './box-badge.png'

  defineProps<{
    index: number,
    data: object,
	isshow:boolean
  }>()

  const emits = defineEmits(['showRules'])

  // const showRules = ref(false)

  /**
   * 换箱操作
   */
  function changeBox(gameId, gameType, count) {
    uni.navigateTo({
      url: '/pages/index/change-box?id='+gameId+'&type='+gameType+'&count='+count
    })
  }

  function gotoPackage() {
    uni.switchTab({
      url: '/pages/package/index'
    })
  }
</script>

<template>
  <view class="game-panel">
    <!-- <view class="box-badge">
      <view class="text-box">
        <text>当前第{{ index }}套，共{{ data.box_count }}套</text>
      </view>
      <image class="box-badge-img" :src="boxBadge" mode="widthFix"></image>
    </view> -->

    <view class="product-detail">
      <image class="product-img" style="width: 100%;min-height: 250rpx;" mode="widthFix" :src="data.main_photo"></image>


    <!--  <view class="product-left-zone">
        <game-btn icon="refresh" label="刷新" @click="emits('refresh')" />
      </view> -->

      <view class="product-right-zone">
        <game-btn icon="help" label="规则"  @click="emits('showRules')" v-if="isshow" />
        <game-btn icon="share" label="分享" />
        <game-btn icon="carriage" label="车厢" @click="gotoPackage"/>
      </view>
    </view>

    <!-- <van-popup :show="showRules" custom-style="background-color: rgba(0, 0, 0, 0)">
      <view class="guizebg">
        <view class="guizeitem">
          <image class="guizeitemimage"
            src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/text-board-bg.png"
            mode="widthFix"
          ></image>

          <view class="plabel">
            <view class="ptitle">规则</view>
						<view style="height: 121px;">
							<scroll-view scroll-y="true" style="height: 121px;">
								<text class="pcontent">
									{{data.instruction}}
								</text>
							</scroll-view>
						</view>
          </view>
        </view>

        <image src="../../static/pay-close.png" class="close" @click="showRules = false"></image>
      </view>
    </van-popup> -->

    <!-- <view class="game-bottom">
      <view class="product-info">
        <text class="product-name">{{ data.name }}</text>
        <view class="price-tag">
          <text>售价</text>
          <text class="product-price">{{ (data.price/100).toFixed(2) }}</text>
          <text>/次</text>
        </view>
      </view>

      <view class="product-control">
        <game-btn small-text icon="prev-box" label="上一箱" txtcolor="#7A5E15" @click="emits('prev')" />
        <game-btn small-text icon="refresh-box" label="换箱" txtcolor="#7A5E15" @click="changeBox(data.id, data.type, data.box_count)" />
        <game-btn small-text icon="next-box" label="下一箱" txtcolor="#7A5E15"  @click="emits('next')" />
      </view>
    </view> -->
  </view>
</template>

<style scoped lang="scss">
  .game-panel {
    width: 100%;
    box-sizing: content-box;
    background-color: transparent;
    position: relative;
  }

  .game-bottom {
    width: 100%;
    background-image: url('./bottom-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 351/57.5;
    color: white;
  }

  .box-badge {
    height: 50px;
    position: absolute;
    width: 80%;
    top: 66px;
    left: 0;
    z-index: 2;

    .box-badge-img {
      width: 50px;
      height: 50px;
      position: absolute;
    }

    .text-box {
      position: absolute;
      left: 35px;
      top: 14px;
      padding-left: 18px;
      background-color: #FEEFB2;
      border: 1px solid #E3A917;
      height: 22px;
      line-height: 22px;
      padding-right: 1em;
      vertical-align: middle;
      color: #7A5E15;
      font-size: 10px;
    }
  }

  .game-bottom {
    width: 100%;
    background-image: url('./bottom-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 351/57.5;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 24px;

    .product-info {
		color: #7A5E15;
      .product-name {
        font-weight: medium;
        font-size: 14px;
      }

      .price-tag {
        font-weight: medium;
        font-size: 10px;

        .product-price {
          font-size: 16px;
        }
      }
    }

    .product-control {
      display: flex;
      gap: 20px;
    }
  }

  .product-detail {
    width: 100%;
    text-align: center;
    // margin-top: -60px;
    position: relative;

    .product-left-zone {
      position: absolute;
      bottom: 12px;
      right: left;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .product-right-zone {
      position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
      right: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }

  .guizebg {
    width: 100%;
  }

  .guizeitem {
    width: 700rpx;
    position: relative;
  }

  .guizeitemimage {
    width: 100%;
  }

  .plabel {
    position: absolute;
    left: 20rpx;
    top: 20rpx;
    padding: 0 20rpx;
  }

  .ptitle {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    color: #ffffff;
  }

  .pcontent {
    color: #ffffff;
    line-height: 32rpx;
    font-size: 26rpx;
    margin-bottom: 6rpx;
  }

  .close {
    position: absolute;
    right: 40rpx;
    top: 20rpx;
    width: 48rpx;
    height: 48rpx;
  }
</style>
